<script setup>
import { reactive } from 'vue';

const tableData = reactive([{
    sNum:'343434',
    sName:'gggggg'
}])


// 以下为分页功能
//page-size 改变时触发
function change_size(val) {
    console.log('change_size', val);
}
//current-page 改变时触发	
function change_current(val) {
    console.log('change_current', val);
}
//用户点击上一页按钮改变当前页时触发	
function click_prev() {
    console.log('click_prev');
}
//用户点击下一页按钮改变当前页时触发
function click_next() {
    console.log('click_next');
}


</script>



<template>
    <div>
        <div class="accountheader">
            <h3>薪酬列表</h3>
        </div>
        <el-table :data="tableData" border style="width:95%" empty-text="暂无薪酬列表数据">
            <el-table-column prop="sNum" label="员工编号" width="100" align="center" />
            <el-table-column prop="sName" label="员工姓名" width="100" align="center" />
            <el-table-column prop="sJob" label="岗位" width="100" align="center" />
            <el-table-column prop="sSector" label="所属部门" width="100" align="center" />
            <el-table-column prop="sType" label="员工类型" width="100" align="center" />
            <el-table-column prop="sAttend" label="出勤天数" width="100" align="center" />
            <el-table-column prop="sAttendNum" label="出勤班次" width="100" align="center" />
            <el-table-column prop="sLate" label="迟到（次）" width="70" align="center" />
            <el-table-column prop="sEarly" label="早退（次）" width="70" align="center" />
            <el-table-column prop="sLack" label="缺卡（次）" width="70" align="center" />
            <el-table-column prop="sAbsence" label="旷工（次）" width="70" align="center" />
            <el-table-column prop="sOverwork" label="加班(小时)" width="70" align="center" />
            <el-table-column prop="monthSalary" label="月（年）&nbsp &nbsp 薪酬（元）" width="110" align="center" />
            <el-table-column prop="realSalary" label="实际薪酬" width="120" align="center" />
        </el-table>
        <div style="height: 100px;"></div>

        <el-pagination small background layout="prev, pager, next" :total="50" class="mt-4" @size-change="change_size"
            @current-change="change_current" @prev-click="click_prev" @next-click="click_next" />
        <div style="height: 100px;"></div>
        
    </div>

</template>


<style>
.accountheader {
    height: 50px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.accountheader h3 {
    margin-left: 20px;
    height: 50px;
    line-height: 50px;
    color: var(--el-color-primary);
}

.accountheader-addacc {
    display: block;
    margin-right: 140px;
}

.el-pagination {
    margin: 0 auto;
    margin-top: 30px;
    width: 50%;
}
</style>